<template>
  <div class="login-page">
    <!-- 装饰背景 -->
    <div class="bg-decoration"></div>
    <div class="bg-gradient"></div>

    <!-- 装饰元素 -->
    <div class="decor-element decor-1"></div>
    <div class="decor-element decor-2"></div>

    <!-- 主容器 -->
    <div class="container">
      <!-- 左侧品牌区域 -->
      <div class="brand-section">
        <div class="brand-content">
          <div class="logo pulse-effect">
            <i class="el-icon-comments"></i>
          </div>
          <h1 class="brand-title">企业级智能通讯平台</h1>
          <p class="brand-desc">安全 · 高效 · 专业 · 可靠</p>

          <div class="features">
            <div class="feature-item hover-lift">
              <div class="feature-icon">
                <i class="el-icon-shield"></i>
              </div>
              <div class="feature-text">
                <h3>企业级安全</h3>
                <p>ISO 27001认证，银行级数据加密</p>
              </div>
            </div>
            <div class="feature-item hover-lift">
              <div class="feature-icon">
                <i class="el-icon-connection"></i>
              </div>
              <div class="feature-text">
                <h3>高可用架构</h3>
                <p>99.9%服务可用性，7x24小时支持</p>
              </div>
            </div>
            <div class="feature-item hover-lift">
              <div class="feature-icon">
                <i class="el-icon-s-custom"></i>
              </div>
              <div class="feature-text">
                <h3>统一身份管理</h3>
                <p>支持LDAP/AD集成，单点登录SSO</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧登录区域 -->
      <div class="login-section">
        <div class="login-card shadow-depth">
          <!-- 注册入口 -->
          <div class="register-link" @click.prevent="routerRegister">
            <span>还没有账号？{{ $t('system.register') }}</span>
            <i class="el-icon-arrow-right ml-2 transition-transform"></i>
          </div>

          <!-- 登录标题 -->
          <div class="login-header">
            <h2 class="login-title">{{ $t('system.loginName') }}</h2>
            <p class="login-subtitle">{{ $t('system.loginDesc') || '请输入账号信息登录' }}</p>
          </div>

          <!-- 登录表单 -->
          <div class="login-form">
            <el-tabs v-model="activeName" @tab-click="handleClick" class="login-tabs">
              <el-tab-pane :label="$t('system.accountLogin')" name="first">
                <AccountLogin class="form-content" />
              </el-tab-pane>
              <el-tab-pane :label="$t('system.SmsLogin')" name="second">
                <SmsLogin class="form-content" />
              </el-tab-pane>
            </el-tabs>
          </div>

          <!-- 分隔线 -->
          <div class="divider">
            <span>{{ $t('system.otherWays') }}</span>
          </div>

          <!-- 第三方登录 -->
          <div class="social-login">
            <button class="social-btn hover-scale" @click="otherLogin('gitee')">
              <gitee class="social-icon" />
              <span>Gitee</span>
            </button>
            <button class="social-btn hover-scale" @click="otherLogin('github')">
              <github3 class="social-icon" />
              <span>GitHub</span>
            </button>
            <button class="social-btn hover-scale" @click="otherLogin('qq')">
              <qq class="social-icon" />
              <span>QQ</span>
            </button>
            <button class="social-btn hover-scale" @click="otherLogin('weixin')">
              <weixin class="social-icon" />
              <span>微信</span>
            </button>
          </div>

          <!-- 企业安全提示 -->
          <div class="enterprise-security-notice">
            <i class="el-icon-info"></i>
            <span>您的登录信息已通过企业级安全加密保护</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="page-footer">
      <div class="footer-content">
        <div class="footer-links">
          <a href="#" class="footer-link">隐私政策</a>
          <a href="#" class="footer-link">服务条款</a>
          <a href="#" class="footer-link">安全中心</a>
          <a href="#" class="footer-link">技术支持</a>
        </div>
        <div class="enterprise-info">
          <span class="company-name">Enterprise Communication Platform</span>
          <span class="version">v2.0 Enterprise Edition</span>
        </div>
        <p>© 2024 企业级智能通讯平台. 保留所有权利.</p>
      </div>
    </footer>
  </div>
</template>

<script>
import Footer from "../../components/Common/Footer";
import Header from "../../components/Common/Header";
import gitee from "@/assets/icon/gitee.svg";
import qq from "@/assets/icon/qq.svg";
import github3 from "@/assets/icon/github3.svg";
import weixin from "@/assets/icon/weixin.svg";
import AccountLogin from "./AccountLogin";
import config from "@/config/config";
import SmsLogin from "./SmsLogin";

export default {
  components: {
    gitee,
    qq,
    github3,
    weixin,
    AccountLogin,
    SmsLogin,
    Header,
    Footer
  },
  data() {
    return {
      activeName: "first"
    };
  },
  methods: {
    handleClick(tab, event) {
      // 保持原有逻辑不变
    },
    otherLogin(command) {
      // 保持原有逻辑不变
      switch (command) {
        case "gitee":
          window.open(
            "https://gitee.com/oauth/authorize?client_id=" +
              config.GiteeLogin.clientID +
              "&redirect_uri=" +
              config.GiteeLogin.redirectUri +
              "&response_type=code",
            "_self"
          );
          break;
        case "github":
          window.open(
            "https://github.com/login/oauth/authorize?client_id=" +
              config.GitHubLogin.clientID +
              "&redirect_uri=" +
              config.GitHubLogin.redirectUri +
              "&scope=user",
            "_self"
          );
          break;
        case "qq":
          window.open(
            "https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=" +
              config.QQ.clientID +
              "&redirect_uri=" +
              config.QQ.redirectUri +
              "&scope=user",
            "_self"
          );
          break;
        case "weixin":
          this.$notify({
            title: "WeChat快捷登入",
            message: "未完成",
            type: "warning"
          });
          break;
      }
    },
    routerRegister() {
      this.$router.push("/register");
    }
  }
};
</script>

<style scoped lang="scss">
// 全局样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

// 主题变量
$primary: #4361ee;
$primary-light: #6287ff;
$primary-dark: #3a56d4;
$secondary: #3f37c9;
$accent: #4895ef;
$light: #f8f9fa;
$dark: #212529;
$gray: #6c757d;
$light-gray: #e9ecef;
$white: #ffffff;

// 动画
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes float-delay {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes shine {
  0% {
    background-position: -100px;
  }
  60%,
  100% {
    background-position: 250px;
  }
}

// 通用动画类
.pulse-effect {
  animation: pulse 3s infinite;
}

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.hover-scale {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.08);
}

.transition-transform {
  transition: transform 0.3s ease;
}

.shadow-depth {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);
}

// 主页面样式
.login-page {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background-color: $light;

  // 背景装饰
  .bg-decoration {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: linear-gradient(135deg, $primary, $primary-light);
    top: -200px;
    right: -100px;
    opacity: 0.15;
    filter: blur(80px);
    animation: float 12s ease-in-out infinite;
  }

  .bg-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      135deg,
      rgba(248, 249, 250, 0.9) 0%,
      rgba(240, 242, 255, 0.95) 100%
    );
    z-index: 1;
  }

  // 装饰元素
  .decor-element {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    z-index: 1;
  }

  .decor-1 {
    width: 150px;
    height: 150px;
    top: 20%;
    right: 35%;
    transform: rotate(45deg);
    animation: float 8s ease-in-out infinite;
  }

  .decor-2 {
    width: 100px;
    height: 100px;
    bottom: 25%;
    left: 30%;
    border-radius: 50%;
    animation: float-delay 10s ease-in-out infinite;
  }

  // 容器
  .container {
    position: relative;
    z-index: 2;
    height: 100%;
    // max-width: 1200px;
    margin: 0 auto;
    display: flex;

    // 左侧品牌区域
    .brand-section {
      flex: 1;
      background: linear-gradient(135deg, $primary, $secondary);
      color: $white;
      padding: 40px;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;

      &::before {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        top: -100px;
        left: -100px;
      }

      &::after {
        content: "";
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        bottom: 50px;
        right: 100px;
      }

      .brand-content {
        position: relative;
        z-index: 2;
        max-width: 400px;
        animation: fadeIn 0.8s ease-out forwards;
        padding-left: 20px;

        .logo {
          width: 90px;
          height: 90px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 40px;
          backdrop-filter: blur(10px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);

          i {
            font-size: 40px;
          }
        }

        .brand-title {
          font-size: 42px;
          font-weight: 700;
          margin-bottom: 16px;
          line-height: 1.2;
          position: relative;
          padding-bottom: 10px;

          &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 60px;
            height: 4px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 2px;
          }
        }

        .brand-desc {
          font-size: 18px;
          opacity: 0.9;
          margin-bottom: 50px;
          line-height: 1.6;
        }

        .features {
          display: flex;
          flex-direction: column;
          gap: 35px;

          .feature-item {
            display: flex;
            align-items: flex-start;
            animation: fadeIn 0.8s ease-out forwards;
            opacity: 0;

            &:nth-child(1) {
              animation-delay: 0.2s;
            }
            &:nth-child(2) {
              animation-delay: 0.4s;
            }
            &:nth-child(3) {
              animation-delay: 0.6s;
            }

            .feature-icon {
              width: 55px;
              height: 55px;
              background: rgba(255, 255, 255, 0.15);
              border-radius: 14px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 20px;
              flex-shrink: 0;

              i {
                font-size: 24px;
              }
            }

            .feature-text {
              h3 {
                font-size: 20px;
                margin-bottom: 6px;
                font-weight: 600;
              }

              p {
                font-size: 15px;
                opacity: 0.8;
              }
            }
          }
        }
      }
    }

    // 右侧登录区域
    .login-section {
      flex: 0 0 450px;
      padding: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: $white;

      .login-card {
        width: 100%;
        max-width: 450px;
        animation: fadeIn 0.6s ease-out forwards;
        background: $white;
        border-radius: 20px;
        padding: 45px 35px 35px;
        position: relative;

        .register-link {
          text-align: right;
          margin-bottom: 45px;
          cursor: pointer;

          span {
            color: $primary;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;

            &:hover {
              color: $primary-dark;
              text-decoration: underline;
            }
          }

          &:hover .transition-transform {
            transform: translateX(5px);
          }
        }

        .login-header {
          margin-bottom: 35px;

          .login-title {
            font-size: 28px;
            font-weight: 700;
            color: $dark;
            margin-bottom: 10px;
            position: relative;
            display: inline-block;

            &::after {
              content: "";
              position: absolute;
              left: 0;
              bottom: -5px;
              width: 40px;
              height: 3px;
              background: $primary;
              border-radius: 2px;
            }
          }

          .login-subtitle {
            font-size: 15px;
            color: $gray;
            line-height: 1.6;
            margin-top: 20px;
          }
        }

        .login-form {
          margin-bottom: 25px;

          .login-tabs {
            .el-tabs__nav {
              justify-content: center;
              margin-bottom: 25px;
            }

            .el-tabs__item {
              font-size: 16px !important;
              padding: 0 25px !important;
              color: $gray !important;
              position: relative;

              &::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0;
                height: 2px;
                background-color: $primary;
                transition: width 0.3s ease;
              }

              &:hover {
                color: $primary !important;
              }

              &.is-active {
                color: $primary !important;
                font-weight: 600 !important;

                &::after {
                  width: 100%;
                }
              }
            }

            .el-tabs__active-bar {
              display: none;
            }
          }
        }

        // 分隔线
        .divider {
          position: relative;
          text-align: center;
          margin: 25px 0;

          &::before,
          &::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 40%;
            height: 1px;
            background: linear-gradient(
              to right,
              transparent,
              $light-gray,
              transparent
            );
          }

          &::before {
            left: 0;
          }
          &::after {
            right: 0;
          }

          span {
            display: inline-block;
            padding: 0 16px;
            background-color: $white;
            font-size: 13px;
            color: $gray;
            position: relative;
            z-index: 1;
          }
        }

        // 第三方登录
        .social-login {
          display: flex;
          justify-content: center;
          gap: 20px;

          .social-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 70px;
            height: 70px;
            background-color: $light;
            border: none;
            border-radius: 14px;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
              background-color: $primary;
              box-shadow: 0 8px 16px rgba(67, 97, 238, 0.2);

              .social-icon {
                color: $white !important;
              }

              span {
                color: $white;
              }
            }

            .social-icon {
              width: 26px;
              height: 26px;
              margin-bottom: 8px;
              transition: all 0.3s ease;

              &.gitee {
                color: #c71d23;
              }
              &.github3 {
                color: #333;
              }
              &.qq {
                color: #12b7f5;
              }
              &.weixin {
                color: #07c160;
              }
            }

            span {
              font-size: 13px;
              color: $gray;
              transition: all 0.3s ease;
            }
          }
        }
      }
    }
  }

  // 页脚
  .page-footer {
    position: relative;
    z-index: 2;
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: $gray;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);

    p {
      margin: 0;
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .login-page {
    .container {
      .brand-section {
        padding: 40px 30px;
        
        .brand-content {
          .features {
            gap: 20px;
            
            .feature-item {
              padding: 15px;
              
              .feature-text {
                h3 {
                  font-size: 18px;
                }
                
                p {
                  font-size: 14px;
                }
              }
            }
          }
        }
      }
      
      .login-section {
        flex: 0 0 450px;
        min-width: 350px;
      }
    }
  }
}

@media (max-width: 1024px) {
  .login-page {
    .container {
      .brand-section {
        padding: 30px 20px;
        
        .brand-content {
          .logo {
            width: 80px;
            height: 80px;
            
            i {
              font-size: 36px;
            }
          }
          
          .brand-title {
            font-size: 36px;
          }
          
          .brand-desc {
            font-size: 16px;
          }
          
          .features {
            gap: 15px;
            
            .feature-item {
              padding: 12px;
              
              .feature-text {
                h3 {
                  font-size: 16px;
                }
                
                p {
                  font-size: 13px;
                }
              }
            }
          }
        }
      }
      
      .login-section {
        flex: 0 0 400px;
        min-width: 320px;
      }
    }
  }
}

@media (max-width: 768px) {
  .login-page {
    .container {
      .brand-section {
        display: none;
      }
      
      .login-section {
        flex: 1;
        width: 100%;
        padding: 40px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .login-card {
          max-width: 100%;
          width: 100%;
        }
      }
    }
  }
}

@media (max-width: 600px) {
  .login-page {
    .decor-element {
      display: none;
    }

    .container {
      .login-section {
        padding: 20px 15px;
        
        .login-card {
          padding: 30px 20px 25px;

          .social-login {
            gap: 15px;

            .social-btn {
              width: 65px;
              height: 65px;
            }
          }
        }
      }
    }
  }

  // 企业级安全提示
  .enterprise-security-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-top: 20px;
    border: 1px solid rgba(16, 185, 129, 0.2);

    i {
      margin-right: 8px;
      font-size: 14px;
    }
  }

  // 企业级页脚样式
  .page-footer {
    .footer-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      text-align: center;

      .footer-links {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        justify-content: center;

        .footer-link {
          color: rgba(255, 255, 255, 0.8);
          text-decoration: none;
          font-size: 14px;
          transition: color 0.3s ease;

          &:hover {
            color: white;
          }
        }
      }

      .enterprise-info {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .company-name {
          font-size: 16px;
          font-weight: 600;
          color: white;
        }

        .version {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.7);
        }
      }

      p {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.6);
        margin: 0;
      }
    }
  }
}
</style>
    
